<template>
  <div class="main">
    <Top name1='商品管理' name2="商品列表"></Top>
   <el-card style="margin-top:40px;height: 800px;position: relative;">
    <el-input
    style="width:200px;
    padding-left: 0px;"
    v-model="getListParams.query"
    @input="sou"
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
   >
  </el-input>
  <el-button type="primary" style="margin-left:15px" @click="addgood">添加商品</el-button>
    <div>
      <template>
        <el-table
          :data="goodList"
          border
          style="width: 100%;padding:0;margin-top: 20px;text-align: ;">
          <el-table-column
            type="index"
            label="#"
            width="100">
          </el-table-column>
          <el-table-column
            prop="goods_name"
            label="商品名称"
            width="700">
          </el-table-column>
          <el-table-column
            prop="goods_price"
            label="价格(元)"
            width="100">
          </el-table-column>
          <el-table-column
            prop="goods_weight"
            label="商品重量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="add_time"
            width="200"
            label="创建时间">
          </el-table-column>
          <el-table-column
            width="160"
            label="操作">
            <template slot-scope="scoped">
              <el-tooltip class="item" effect="light" content="编辑商品" placement="top">
                <el-button class="sm" type="primary" @click="xg(scoped.row)" icon="el-icon-edit">编辑</el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="删除商品" placement="top">
                <el-button class="sm" type="danger" icon="el-icon-delete" @click="delgood(scoped.row)">删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </div>
    <!-- 分页部分 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=getListParams.pagenum
          :page-sizes="[5,10]"
          :page-size=getListParams.pagesize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
        </el-pagination>
      </div>
   </el-card>
<!-- 编辑商品 -->
<el-dialog
      title="修改商品信息"
      :visible.sync="xgdisplay"
      width="400px"
      >
      <el-form  :model="resetForm" ref="resetForm" label-width="100px" class="demo-dynamic">
        <el-form-item
          prop="goods_name"
          label="商品名称"
        >
          <el-input style="width:200px" v-model="resetForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item
          prop="goods_price"
          label="价格"
          :rules="[
            { required: true, message: '请输入商品价格', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="resetForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item
          prop="goods_number"
          label="数量"
          :rules="[
            { required: true, message: '请输入商品数量', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="resetForm.goods_number"></el-input>
      </el-form-item>
      <el-form-item
          prop="goods_weight"
          label="重量"
          :rules="[
            { required: true, message: '请输入商品重量', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="resetForm.goods_weight"></el-input>
      </el-form-item>
     
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="xgdisplay = false">取 消</el-button>
        <el-button type="primary" @click="xgreq">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import Top from '../../components/top.vue'
import {getGoodsAjax,delGoods,selGoods, resetGoods} from '../../api/goods'
export default {
  components:{
    Top
  },
  data () {
    return {
      getListParams:{
        query:'',
        pagenum:1,
        pagesize:JSON.parse(window.sessionStorage.getItem('GoodsListSize'))
      },
      goodList:[],
      total:0,
      xgdisplay:false,
        resetForm: {
          domains: [{
            value: ''
          }],
          goods_id :0,
          goods_name :"",
          goods_price :0,
          goods_number:0,
          goods_weight:0,
        },
    };
  },
  created() {
    this.getGoodsList()
  },
  mounted() {},
  methods: {
  // 获取商品列表
    async getGoodsList(){
      if(!window.sessionStorage.getItem('GoodsListSize')){
        this.getListParams.pagesize = 10
      }
      const res = await getGoodsAjax(this.getListParams)
      if(res.data.meta.status!==200){
        return this.$message.error("获取商品列表失败")
      }

      res.data.data.goods.forEach(ele => {
          ele.add_time = this.time(ele.add_time)
      });
      this.goodList = res.data.data.goods
      this.total = res.data.data.total

    },
    // 设置每页条数
    handleSizeChange(num){
        this.getListParams.pagesize = num
        window.sessionStorage.setItem("GoodsListSize",num)
        this.getGoodsList()
      },
    // 点击第几页
      handleCurrentChange(num){
        this.getListParams.pagenum = num
        this.getGoodsList()
      },
    // 搜索 输入时就进行搜素
      sou(){
        this.getGoodsList()
      },
    // 添加页面
      addgood(){
        this.$router.push('/goodsinfo')
      },
    // 删除
      delgood(row){
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
            const res = await delGoods(row.goods_id)
            console.log(res);
            if(res.data.meta.status!=200){
              return this.$message({
                type: 'error',
                message: '删除失败！'
              });    
            }
            this.getGoodsList()
            return this.$message.success({
              type: 'success',
              message: '删除成功!'
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 修改框
    async xg(row){
      this.xgdisplay = true
      const res = await selGoods(row.goods_id)
      if(res.data.meta.status!=200){
        this.xgdisplay = false
        return this.$message.info("获取商品信息失败")
      }
      // 回写信息
      this.resetForm.goods_id=res.data.data.goods_id
      this.resetForm.goods_name=res.data.data.goods_name
      this.resetForm.goods_price=res.data.data.goods_price
      this.resetForm.goods_number=res.data.data.goods_number
      this.resetForm.goods_weight=res.data.data.goods_weight
    },
    // 确认修改
    async xgreq(){
      this.xgdisplay = false
      const result = await  resetGoods(this.resetForm.goods_id,{
        goods_name:this.resetForm.goods_name,
        goods_price : this.resetForm.goods_price,
        goods_number: this.resetForm.goods_number,
        goods_weight :this.resetForm.goods_weight
      })
      console.log(result.data);
      if(result.data.meta!=201){
        return this.$message.error("修改商品失败")
      }
      return this.$message.success("修改成功")
    }
  },
  computed:{
    // 时间戳转日期
    time(){
        // 个位数补0
        function addZero(num){
          if(parseInt(num) < 10){
          num = '0'+num
          }
          return num
        }
        // 时间戳转日期 传参用过函数返回
        return function(i){
          if(i){
            var oDate = new Date(i),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth()+1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear +'-'+ addZero(oMonth) +'-'+ addZero(oDay) +' '+ addZero(oHour) +':'+
            addZero(oMin) +':'+addZero(oSen);
            return oTime
          }else{
            return "未知参数"
          }
           
        }
      }
  }
}
</script>
<style lang='scss' scoped>
.main{
  padding: 20px 40px;
  .block{
    display: flex;
    margin-top: 20px;
    width: 1100px;
    position: absolute;
    bottom: 25px;
    justify-content: center;
  }
  .sm{
    padding: 10px;
    font-size: 12px;
  }
}
</style>